var React = require('react');
var ReactDOM = require('react-dom');
var TodoItem = require('./TodoItem.jsx');

module.exports = React.createClass({
    getInitialState: function () {
        return {
            todoItems: [{
                task: 'Learn React'
            }, {
                task: 'Learn Webpack'
            }, {
                task: 'Conquer World'
            }],
            owner: 'John Doe'
        }
    },
    render: function () {
        var todoItems = this.state.todoItems;
        var owner = this.state.owner;

        return <div>
            <div className='ChangeOwner'>
                <input type='text' defaultValue={owner} onChange={this.updateOwner}/>
            </div>

            <div className='todoItems'>
                <ul>
                    {todoItems.map((todoItem, i) =>
                    <li key={'todoitem' + i}>
                        <TodoItem owner={owner} task={todoItem.task}/>
                    </li>
                        )}
                </ul>
            </div>
        </div>;
    },
    updateOwner: function () {
        this.setState({
            owner: e.target.value
        })
    }
})
